// toastr.info('注册成功') //普通提示
// toastr.success('注册成功')//成功提示
// toastr.warning('注册成功')//警告提示
// toastr.error('注册成功')//错误提示

// 需求1:点击a链接,显示隐藏对应的盒子
// 获取元素
// 注册
const register = document.querySelector('.register')
const a1 = document.querySelector('.register a')
// 登录
const login = document.querySelector('.login')
const a2 = document.querySelector('.login a')
// 注册
a1.onclick = function () {
    login.style.display = 'block'
    register.style.display = 'none'
}
// 登录
a2.onclick = function () {
    login.style.display = 'none'
    register.style.display = 'block'
}

// 需求2:input校验(4个input - 非空校验和长度校验)
// 获取所有input
const inp1 = document.querySelector('.register [name=username]')
const inp2 = document.querySelector('.register [name=password]')
const inp3 = document.querySelector('.login [name=username]')
const inp4 = document.querySelector('.login [name=password]')

// 封装函数-四个参数  
// input对应element元素形参  reg正则形参
// 用this不用input在构造函数时更便利
function verifyInput(ele, txt1, txt2, reg) {
    // 绑定事件 - 输入内容的时候触发 : keyup 或者 input 都可以
    ele.addEventListener('input', function () {
        if (this.value == '') {
            // 显示input后面的兄弟标签,设置提示内容
            this.nextElementSibling.style.display = 'block'
            this.nextElementSibling.innerHTML = txt1
            return;// 如果触发了非空校验,后面的长度就不用校验了,else也可以取消了
        }  //else {
        //     // 内容不为空就隐藏,清空内容
        //     this.nextElementSibling.style.display = 'none'
        //     this.nextElementSibling.innerHTML = ''
        // }
        // 长度校验 - 用户名 -正则校验  大写\S非空白
        if (reg.test(this.value)) {
            // 通过正则校验,就要隐藏span
            this.nextElementSibling.style.display = 'none'
            this.nextElementSibling.innerHTML = ''
        } else {
            // 隐藏input后面的兄弟标签,清空内容
            this.nextElementSibling.style.display = 'block'
            this.nextElementSibling.innerHTML = txt2
        }
    })
}
// 调用函数
// 正则表达式不用带引号
verifyInput(inp1, '用户名不能为空!', '用户名必须2-15位之间', /^\S{2,15}$/)
verifyInput(inp2, '密码不能为空!', '密码必须6-15位之间', /^\S{6,15}$/)
verifyInput(inp3, '用户名不能为空!', '用户名必须2-15位之间', /^\S{2,15}$/)
verifyInput(inp4, '密码不能为空!', '密码必须6-15位之间', /^\S{6,15}$/)

//  需求3:注册功能;
let form1 = document.querySelector('.register form')
form1.addEventListener('submit', function (e) {
    // 阻止默认提交
    e.preventDefault()
    // 发送ajax
    axios({
        method: 'POST',
        url: '/api/register',
        // jQuery中快速获取表单数据:$(this).serialize()
        // params控制查询参数,data控制请求体参数
        data: {
            username: inp1.value,
            password: inp2.value
        }
    }).then(({ data: res }) => {
        // 判断业务状态码失败的情况
        // if (res.code == 1) {
        //     return toastr.warning(res.message);//警告提示
        // }
        // 判断业务状态码成功的情况
        if (res.code == 0) {
            // 成功提示
            toastr.success('恭喜您,注册用户成功!');//成功提示
            //  了解:把注册用户名密码赋值给登录部分
            inp3.value = inp1.value
            inp4.value = inp2.value
            // 清空form表单
            form1.reset()
            // 切换到登录模块
            a1.click()
        }
    })
})

//  需求4:登录功能;
let form2 = document.querySelector('.login form')
form2.addEventListener('submit', function (e) {
    // 阻止默认提交
    e.preventDefault()
    // 发送ajax
    axios({
        method: 'POST',
        url: '/api/login',
        // jQuery中快速获取表单数据
        // data: $(this).serialize()
        // params控制查询参数,data控制请求体参数
        data: {
            username: inp3.value,
            password: inp4.value
        }
    }).then(({ data: res }) => {
        // 判断业务状态码失败的情况
        // if (res.code == 1) {
        //     return toastr.warning(res.message);//警告提示
        // }
        // 判断业务状态码成功的情况
        if (res.code == 0) {
            toastr.success('恭喜您,用户登录成功!');//成功提示
            // 跳转到首页,以html为准
            location.href = './index.html'
            // 保存token,后面ajax要用
            localStorage.setItem('token', res.token)
        }
    })
})